<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area">
        <el-button v-has type="primary" size="medium" @click="addPage">新建菜单</el-button>
      </div>
      <div class="filter_area">
      <!--  <el-input class="serach_input mr_15 mt_15" size="medium" placeholder="菜单名称"></el-input>
        <el-button size="medium">搜索</el-button> -->
      </div>
      <div class="list_con">
        <el-table :data="list">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="type" label="菜单类型"></el-table-column>
          <el-table-column prop="status_text" label="状态"></el-table-column>
          <el-table-column prop="create_time" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" v-has @click="EditHandle(scope.row)">编辑</el-button>
              <el-button type="text" v-has @click="DelHandle(scope.row.id)">删除</el-button>
              <el-button
                type="text"
                v-has
                @click="EditStatus(scope.row)"
              >{{scope.row.status==0? '启用' :'禁用'}}</el-button>
              <!-- <el-button type="text">预览</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  bottom_menu_list,
  delbottom_menur,
  editbottom_menu
} from "@/api/mall/dndlist";

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //添加新页面
    addPage() {
      this.$router.push({
        path: "/custommenu"
      });
    },
    EditStatus(item) {
      let data = {
        name: item.name,
        type: item.type,
        data: JSON.stringify(item.data),
        status: item.status ? 0 : 1,
        id: item.id,
        update_time: item.update_time
      };
      editbottom_menu(data).then(res => {
        this.getlist();
      });
    },
    //获取数据
    getlist() {
      let data = {};
      bottom_menu_list(data, 1, 10).then(res => {
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    EditHandle(data) {
      this.$router.push({
        path: "/custommenu?id=" + data.id,
        query: {
          type: data.type
        }
      });
    },
    DelHandle(id) {
      let _this = this;
      this.$confirm("确认删除？").then(_ => {
        let data = {
          id: id
        };
        delbottom_menur(data).then(res => {
          _this.getlist();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.list_con{
  padding: 0;
  margin-top: 20px;
}
</style>